<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="机构名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>机构IP段：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.ipStr"
                        clearable
                        placeholder="机构IP段"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>统计时间：</label>
                <el-date-picker
                    v-model="queryData.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>

        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column
                    prop="name"
                    label="机构名称"
                ></el-table-column>
                <el-table-column
                    prop="ipStr"
                    label="机构IP段"
                ></el-table-column>
                <el-table-column
                    prop="extra.accessLog"
                    label="访问量"
                ></el-table-column>
                <el-table-column
                    prop="extra.useLog"
                    label="使用人次"
                ></el-table-column>
                <el-table-column
                    prop="extra.paperUseLog"
                    label="试卷使用量"
                ></el-table-column>
                <el-table-column
                    prop="extra.questionUseLog"
                    label="试题使用量"
                ></el-table-column>
                <el-table-column
                    prop="extra.registerLog"
                    label="注册人数"
                ></el-table-column>
                <el-table-column
                    prop="extra.timeUseLog"
                    label="使用时长(分钟)"
                ></el-table-column>
                <el-table-column
                    prop="extra.avgMinute"
                    label="平均使用时长(分钟)"
                ></el-table-column>
                <el-table-column
                    prop="extra.downLoadLog"
                    label="下载次数"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="300"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                groupLog(scope.row, '使用记录')
                            "
                        >详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog :title="groupLogFormTitle" :visible.sync="groupLogFormVisible" width="80%">
            <div class="el-dialog-div">
                <group-use-ip-log-detail-component
                    v-if="groupLogFormVisible"
                    ref="groupLogFormRef"
                    :group-id="groupLogGroupId"
                    :time="queryData.time"
                    :group-name="groupLogGroupName"
                    :ip-str="queryData.ipStr"
                    :real="realData"
                    :permission="groupLogGroupPermission"

                >
                </group-use-ip-log-detail-component>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get} from "@/api/request";
import groupUseIpLogDetailComponent from "@/views/models/vrs/group/groupIpLogDetail";
import {isIp, isIpV6} from "@/utils/validate";

export default {
    name: "GroupIpLog",
    components: {groupUseIpLogDetailComponent},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: null,
                time: [],
                ipStr:null,
            },
            format: {
                dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
                dateFormat: "yyyy-MM-dd",
                monthFormat: "yyyy-MM",
                yearFormat: "yyyy"
            },
            sourceTypes: [
                {
                    "label": "PC-职业资格",
                    "value": "PcZhiYe"
                },
                {
                    "label": "PC-高教题库",
                    "value": "PcGjtk"
                },
                {
                    "label": "维普考试APP-职业资格",
                    "value": "AppZhiYe"
                },
                {
                    "label": "维普考试APP-高教题库",
                    "value": "AppGjtk"
                },
                {
                    "label": "维普职业考试题库APP",
                    "value": "WpZhiYeApp"
                },
                {
                    "label": "维普掌上题库(微信端)-职业资格",
                    "value": "WpZSZhiYe"
                },
                {
                    "label": "维普掌上题库(微信端)-高教题库",
                    "value": "WpZSGjtk"
                },
            ],
            groupLogFormTitle: null,
            groupLogFormVisible: false,
            groupLogGroupId: null,
            groupLogGroupName: null,
            groupLogGroupPermission:null,
            areas: null,
            regions: null,
            flag: {
                areaFlag: false,
                regionFlag: false,
            },
            realData:null,
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.currentUser,
            userRole: state => state.user,
        })
    },
    watch: {
    },
    created() {
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.initTime();
            this.getCurrentUserMaxRole();
            if( this.ipCheck()){
                this.loadTable("/user/log/all-count-ip-page", {
                    startTime: this.queryData.time[0].format(this.format.dateFormat) + " 00:00:00",
                    endTime: this.queryData.time[1].format(this.format.dateFormat) + " 23:59:59",
                    real:this.realData
                }, true,);
            }

        },
        getCurrentUserMaxRole() {
            // if ((this.userInfo.userTypes.includes("admin")) || this.userRole.roles.includes("maxAdmin")) {
            //     this.realData = true;
            // }  else  {
            //     this.realData = true;
            // }
            this.realData = false;

        },
        ipCheck(){
            if(this.queryData.ipStr){
                let split = this.queryData.ip.split("-");
                if(split.length !== 2){
                    this.$message.warning("ip段通过 - 分隔");
                    return false;
                }
                if(!(isIp(split[0]) && isIp(split[1])) || !(isIpV6(split[0]) && isIpV6(split[1]))){
                    this.$message.warning("ip格式不对");
                    return false;
                };
                if(this.compareIP(split[0] , split[1])){
                    this.$message.warning("截止ip必须大于起始ip");
                    return false;
                }

            }
            return true;
        },
        compareIP(ipBegin, ipEnd) {
            if (this.isIpV4(ipBegin) && this.isIpV4(ipEnd)) {
                return  this.compareIPV4(ipBegin, ipEnd);
            } else if (!this.isIpV4(ipBegin) && !this.isIpV4(ipEnd)) {
                return this.compareIPV6(ipBegin, ipEnd);
            } else {
                this.$confirm("请保持IP类型一致")
                return false;
            }
        },
        isIpV4(ip) {
            if (ip.indexOf(".") > 0) {
                return true;
            }
        },
        compareIPV4(ipBegin, ipEnd) {
            var temp1;
            var temp2;
            temp1 = ipBegin.split(".");
            temp2 = ipEnd.split(".");
            for (var i = 0; i < 4; i++) {
                if (parseInt(temp1[i]) > parseInt(temp2[i])) {
                    return true;
                } else if (parseInt(temp1[i]) < parseInt(temp2[i])) {
                    return false;
                }
            }
            return false;
        },
        compareIPV6(ipBegin, ipEnd) {
            var temp1;
            var temp2;
            temp1 = ipBegin.split(":");
            temp2 = ipEnd.split(":");
            //循环比较对应的项
            for (var i = 0; i < temp1.length; i++) {
                if (temp1[i] === ("")) {
                    if (temp2[i] === ("")) { //对应的项都位空，往下比较
                        continue;
                    } else {
                        return false;
                    }
                } else {
                    if (temp2[i] === ("")) {
                        return true;
                    } else {   //确定对应的项不位空，讲字符串转换位整数进行比较
                        var value1 = parseInt(temp1[i], 16);
                        var value2 = parseInt(temp2[i], 16);
                        if (value1 > value2) {
                            return true;
                        } else if (value1 < value2) {
                            return false;
                        } else {
                            continue;
                        }
                    }
                }
            }
            //循环结束，表示两个串表示的地址相同
            return true;

        },
        groupLog(data, title) {
            this.groupLogFormVisible = true;
            this.groupLogFormTitle = title;
            this.groupLogGroupId = data.id;
            this.groupLogGroupName = data.name;
            this.groupLogGroupPermission = data.permission;
        },
        initTime() {
            if (!this.queryData.time || this.queryData.time.length === 0) {
                const end = new Date();
                const start = new Date();
                start.setDate(1);
                // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                this.queryData.time = [start, end]
            }
        },
        loadArea(query) {
            return this.flagPromise(
                get("/user/sys/dict/detail/listByTypeCode", {
                    name: query,
                    typeCode: "area"
                }).then(res => {
                    this.areas = res;
                    return res;
                }),
                "areaFlag"
            );
        },
        loadRegion(areaCode) {
            this.regions = [];
            this.queryData.regionCode = null;
            if (areaCode) {
                return this.flagPromise(
                    get("/user/sys/dict/detail/listByTypeCode", {
                        parentCode: areaCode,
                        typeCode: "region"
                    }).then(res => {
                        this.regions = res;
                        return res;
                    }),
                    "regionFlag"
                );
            }

        },
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
